<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS-DOM</title>
    <style>
        p {
            color: gray;
            font-family: "Arial", sans-serif;
        }

        .fineprint {
            font-size: 1em;
        }

        #intro {
            font-size: .8em;
        }

        input[type*="text"] {
            font-size: 1.2em;
        }

        a:hover {
            color: #c60;
        }

        tr:hover {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p>An example of a paragraph</p>
<p id="example" style="color: gray;font-family: 'Arial',sans-serif;">An example of a paragraph</p>
<p id="example1" style="color: #999999;">An example of a paragraph</p>
<p id="example2" style="font-size:1em;">An example of a paragraph</p>
<p id="example3" style="font:12px 'Arial',sans-serif;">An example of a paragraph</p>
<script>
    function htmlCssJavaScript() {
        var paras = document.getElementsByTagName('p');
        for (var i = 0; i < paras.length; i++) {
            paras[i].onclick = function () {
                alert('You clicked on a paragraph.')
            }
        }

        window.onload = function () {
            var para = document.getElementById('example');
            alert(typeof para.nodeName);
            alert(typeof para.style);
            alert('The color is ' + para.style.color);
        };

        var para1 = document.getElementById('example1');
        alert('The color is ' + para1.style.color);

        var para2 = document.getElementById('example2');
        alert('The color is ' + para2.style.fontSize);

        var para3 = document.getElementById('example2');
        alert('The color is ' + para3.style.fontSize);
    }

    function whenUseDOMScriptSetStyles() {
        function styleHeaderSiblings() {
            var support = document.getElementsByTagName;
            if (!support) {
                return false;
            }

            var headers = document.getElementsByTagName('h1');
            var elem;
            for (var i = 0; i < headers.length; i++) {
                elem = getNextElement(headers[i].nextSibling);
                elem.style.fontWeight = 'bold';
                elem.style.fontSize = '1.2em';
            }

            function getNextElement(node) {
                if (node.nodeType == 1) {
                    return node;
                }
                if (node.nextSibling) {
                    return getNextElement(node.nextSibling)
                }
                return null;
            }
        }

        function stripeTables() {
            var suppord = document.getElementsByTagName;
            if (!suppord) {
                return false;
            }

            var tables = document.getElementsByTagName('table');
            var odd, rows;
            for (var i = 0; i < tables.length; i++) {
                odd = false;
                rows = tables[i].getElementsByTagName('tr');
                for (var j = 0; j < rows.length; j++) {
                    if (odd == true) {
                        rows[j].style.backgroundColor = '#ffc';
                        odd = false;
                    } else {
                        odd = true;
                    }
                }
            }
        }

        function responseEvents() {
            function hightlightRows() {
                var support = document.getElementsByTagName;
                if (!support) {
                    return false;
                }

                var rows = document.getElementsByTagName('tr');
                for (var i = 0; i < rows.length; i++) {
                    rows[i].onmouseover = function () {
                        this.style.fontWeight = 'bold';
                    };
                    rows[i].onmouseout = function () {
                        this.style.fontWeight = 'normal';
                    };
                }
            }
        }
    }

    function classNameProperties() {
        function getNextElement(node) {
            if (node.nodeType == 1) {
                return node;
            }
            if (node.nextSibling) {
                return getNextElement(node.nextSibling)
            }
            return null;
        }

        function styleHeaderSiblings() {
            var support = document.getElementsByTagName;
            if (!support) {
                return false;
            }

            var headers = document.getElementsByTagName('h1');
            var elem;
            for (var i = 0; i < headers.length; i++) {
                elem = getNextElement(headers[i].nextSibling);
                elem.className = 'intro';
            }
        }

        function addClass(element, value) {
            if (!element.className) {
                element.className = value;
            } else {
                var newClassName = element.className;
                newClassName += ' ';
                newClassName += value;
                element.className = newClassName;
            }
        }

        function styleHeaderSiblings2() {
            var support = document.getElementsByTagName;
            if (!support) {
                return false;
            }

            var headers = document.getElementsByTagName('h1');
            var elem;
            for (var i = 0; i < headers.length; i++) {
                elem = getNextElement(headers[i].nextSibling);
                addClass(elem, 'intro');
            }
        }

        function stripeTables() {
            var suppord = document.getElementsByTagName;
            if (!suppord) {
                return false;
            }

            var tables = document.getElementsByTagName('table');
            var odd, rows;
            for (var i = 0; i < tables.length; i++) {
                odd = false;
                rows = tables[i].getElementsByTagName('tr');
                for (var j = 0; j < rows.length; j++) {
                    if (odd == true) {
                        addClass(rows[j], 'odd');
                        odd = false;
                    } else {
                        odd = true;
                    }
                }
            }
        }

        function styleElementSiblings(tag, classes) {
            var support = document.getElementsByTagName;
            if (!support) {
                return false;
            }

            var headers = document.getElementsByTagName(tag);
            var elem;
            for (var i = 0; i < headers.length; i++) {
                elem = getNextElement(headers[i].nextSibling);
                addClass(elem, classes);
            }

            function getNextElement(node) {
                if (node.nodeType == 1) {
                    return node;
                }
                if (node.nextSibling) {
                    return getNextElement(node.nextSibling)
                }
                return null;
            }
        }

        addLoadEvent(function () {
            styleElementSiblings('h1', 'intro');
        });
    }
</script>
</body>
</html>